<template>
  <div class="login-view">

    <div class="header">
      <div class="nav-bar-left-logo">
        <img src="../../assets/img/login/img_logo.png">
      </div>
    </div>

    <div class="center">

      <div class="center-content">
        <div class="left">
          <p class="title">欢迎使用天医助手</p>
          <p class="gray">一站式门诊HIS系统</p>
          <img
            src="../../assets/img/login/img_login.png"
            alt=""
          >
        </div>
        <div class="right">
          <div v-if="isViewType == 1">
            <div class="title">用户登录</div>

            <el-input
              v-model="name"
              placeholder="请输入手机号"
            ></el-input>

            <el-input
              v-model="psw"
              show-password
              placeholder="请输入密码"
              @keyup.native.enter="enterClick"
            ></el-input>

            <div class="other">
              <el-checkbox v-model="automatic">自动登录</el-checkbox>
              <a @click="backClick">忘记密码</a>
            </div>

            <el-button
              type="primary"
              @click="loginClick"
            >登录</el-button>

            <div class="registerHint">
              <p>还没有注册?</p>
              <a
                class="register"
                @click="registerClick"
              >立即注册</a>
            </div>

          </div>

          <div
            class="backView"
            v-else-if="isViewType == 2"
          >
            <div
              class="title"
              @click="leftBack"
            >
              修改密码
              <a class="leftBack">返回</a>
            </div>

            <el-input
              v-model="backPhone"
              placeholder="请输入手机号"
            ></el-input>

            <div class="codeView">
              <el-input
                v-model="code"
                placeholder="请输入验证码"
              ></el-input>

              <el-button
                @click="smsClick"
                :disabled="disable"
              >{{codeStr}}</el-button>
            </div>

            <el-input
              v-model="backPsw"
              show-password
              placeholder="请输入新密码"
            ></el-input>

            <el-input
              v-model="backPswTwo"
              show-password
              placeholder="请再次输入密码"
            ></el-input>

            <el-button
              type="primary"
              @click="backPswClick"
            >确认</el-button>
          </div>

          <div
            class="validationView"
            v-else-if="isViewType == 3"
          >
            <div
              class="title"
              @click="leftBack"
            >
              验证手机号
              <a class="leftBack">返回</a>
            </div>

            <div class="validationPhone">请验证手机号{{validationPhone}}</div>

            <div class="codeView">
              <el-input
                v-model="validationCode"
                placeholder="请输入验证码"
              ></el-input>

              <el-button
                @click="smsClick1"
                :disabled="disable"
              >{{codeStr}}</el-button>
            </div>

            <el-button
              type="primary"
              @click="validationClick"
            >提交验证</el-button>
          </div>

        </div>
      </div>
      <div class="bottom">
        <footerCom />
      </div>
    </div>

  </div>
</template>

<script>
import { setAutomatic, getAutomatic } from "../../utils/localStorageData";
import { sendSms } from "../../api/common";
import { setToken } from "../../utils/auth";
import { forgetPwd, mobileCode } from "../../api/user";
import footerCom from "../../components/footerCom.vue";

export default {
  name: "login",
  components: {
    footerCom
  },
  data: function() {
    return {
      name: "",
      psw: "",
      isViewType: 1,

      backPhone: "",
      code: "",
      codeStr: "发送验证码",
      disable: false,
      timer: null,
      count: "",
      backPsw: "",
      backPswTwo: "",
      automatic: false,

      validationPhone: "",
      validationCode: ""
    };
  },
  mounted: function() {
    this.automatic = getAutomatic();
    if (this.$store.getters.token && getAutomatic()) {
      this.$store.dispatch("user/getInfo").then(user => {
        if (this.$store.getters.menuConfig.length > 0) {
          let index = 0;
          for (let i = 0; i < this.$store.getters.menuConfig.length; i++) {
            if (this.$store.getters.menuConfig[i].code == "health") {
              index = i;
              break;
            }
          }
          this.$router.push(this.$store.getters.menuConfig[index].path);
        }
      });
    }
  },
  methods: {
    enterClick: function() {
      this.loginClick();
    },
    loginClick: function() {
      if (this.name == "") {
        this.$message.error("请输入手机号");
        return;
      }
      if (this.psw == "") {
        this.$message.error("请输入密码");
        return;
      }
      let data = {
        account: this.name,
        pwd: this.psw
      };
      this.$store
        .dispatch("user/login", data)
        .then(code => {
          if (code != 200) {
            if (code == 410) {
              this.isViewType = 3;
              this.validationPhone = this.name;
            } else {
              this.$router.push({ name: "enter" });
            }
          } else {
            setAutomatic(this.automatic);
            this.$store
              .dispatch("setting/setSystemSetting")
              .then(() => {
                this.$store.dispatch("setting/setPrintSetting").catch(e => {});
              })
              .catch(e => {});
            this.$store.dispatch("setting/updataCheckTreatment", 1);
            this.$store.dispatch("setting/updataCheckTreatment", 2);

            this.$store.dispatch("user/getInfo").then(user => {
              if (this.$route.query.backUrl) {
                this.$router.push({ name: this.$route.query.backUrl });
              } else {
                if (user.menus.length && user.menus.length > 0) {
                  let index = 0;
                  for (let i = 0; i < user.menus.length; i++) {
                    if (user.menus[i].code == "health") {
                      index = i;
                      break;
                    }
                  }
                  this.$router.push(user.menus[index].path);
                } else {
                  this.$router.push("clinicManagement");
                }
              }
            });
          }
        })
        .catch(msg => {
          this.$message.error(msg);
        });
    },
    registerClick: function() {
      this.$router.push("/register");
    },
    backClick: function() {
      this.isViewType = 2;
    },
    leftBack: function() {
      this.isViewType = 1;
    },
    smsClick: function() {
      if (this.backPhone == "") {
        this.$message.error("请输入手机号");
        return;
      }
      if (!this.RX.PHONE_RX.test(this.backPhone)) {
        this.$message.error("请输入正确手机号");
        return;
      }
      let data = {
        mobile: this.backPhone,
        sms_key: "sms_auth"
      };
      sendSms(data).then(res => {
        if (res.code == 200) {
          this.startTimer();
          this.$message({
            message: "验证码已发送",
            type: "success"
          });
        }
      });
    },
    smsClick1: function() {
      let data = {
        mobile: this.validationPhone,
        sms_key: "sms_auth"
      };
      sendSms(data).then(res => {
        if (res.code == 200) {
          this.startTimer();
          this.$message({
            message: "验证码已发送",
            type: "success"
          });
        }
      });
    },
    backPswClick: function() {
      if (this.backPhone == "") {
        this.$message.error("请输入手机号");
        return;
      }
      if (this.code == "") {
        this.$message.error("请输入验证码");
        return;
      }
      if (this.backPsw == "") {
        this.$message.error("请输入密码");
        return;
      }
      if (this.backPswTwo == "") {
        this.$message.error("请再次输入密码");
        return;
      }
      if (this.backPswTwo != this.backPsw) {
        this.$message.error("两次密码不一致");
        return;
      }
      let data = {
        mobile: this.backPhone,
        valid_code: this.code,
        new_pwd: this.backPsw
      };
      forgetPwd(data).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.isBackPsw = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    startTimer: function() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.disable = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            this.codeStr = this.count + "(s)";
          } else {
            this.codeStr = "重新发送";
            this.disable = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    validationClick: function() {
      let data = {
        mobile: this.validationPhone,
        code: this.validationCode
      };
      mobileCode(data).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "验证成功",
            type: "success"
          });

          setAutomatic(this.automatic);
          this.$store
            .dispatch("setting/setSystemSetting")
            .then(() => {
              this.$store.dispatch("setting/setPrintSetting").catch(e => {});
            })
            .catch(e => {});
          this.$store.dispatch("setting/updataCheckTreatment", 1);
          this.$store.dispatch("setting/updataCheckTreatment", 2);

          this.$store.dispatch("user/getInfo").then(user => {
            if (this.$store.getters.menuConfig.length > 0) {
              let index = 0;
              for (let i = 0; i < this.$store.getters.menuConfig.length; i++) {
                if (this.$store.getters.menuConfig[i].code == "health") {
                  index = i;
                  break;
                }
              }
              this.$router.push(this.$store.getters.menuConfig[index].path);
            }
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/login/login.scss";
</style>
